import React, { useState,useEffect } from 'react';
import {
    Input, 
    Select, 
    TreeSelect, 
    Space ,Button,  
    Menu, Dropdown , 
    Table, message, 
    Modal, 
    Form, 
    Checkbox, 
    Radio,
    } from 'antd'
import { SearchOutlined, SyncOutlined, IdcardFilled, PlusOutlined ,ExclamationCircleOutlined, EditFilled} from '@ant-design/icons';
import './indexaa.scss'
import axios from '../../../../http/index';




export default function UserManagement() {
    // 表格数组 
    const [data, setdatas] = useState([])

    // 页面初始渲染
    useEffect(() => {
        Updata()
    },[])

    // 初始化请求封装
    const Updata = () =>{
        axios({
            method:'GET',
            url:'/system/per/user/findAllList',
        })
        .then((res) => {
            console.log(res)
            // setdatas(res.data.data)
            const data = res.data.data
            for (let i = 0 ; i < data.length; i++) {
                data[i].key = data[i].id
            }
            setdatas([...data])
            console.log(data)
        })
        .catch((err) => {
            console.log(err)
        })
    
    }
    // from表单
    const [form1] = Form.useForm();
    const [form2] = Form.useForm();
    const [form3] = Form.useForm();
    const [form4] = Form.useForm();

    const { Option } = Select;

    // 树状选择
    const { TreeNode } = TreeSelect;

    // 搜索按钮
    const onFinishsearch = (values) => {
        console.log('添加用户校验:', values);
    };
    const onSearchclick = async () => {
        try {
          const valueonSearch= await form1.validateFields();
          console.log('表单值:', valueonSearch);
          
          axios({
                method:'GET',
                url:'/system/per/user/selectDeptname',
                data:{
                        dept_id: valueonSearch.company,
                        username: valueonSearch.username,
                        nickname: valueonSearch.nickname,
                }
          })
          .then((res) => {
              console.log("返回值:",res)
            //   setdatas(res.data.data)
              message.success('搜索成功')
            //   console.log(data)
          })
          .catch((err) => {
              console.log(err)
          })
          
          Updata()
          setIsModalVisible(false);
        } catch (errorInfo) {
          console.log('Failed:', errorInfo);
        }
      };
    // 警示弹窗
    const { confirm } = Modal;

    // const handleMenuClickEnable = (e) => {
    //     confirm({
    //     title: '警示',
    //     icon: <ExclamationCircleOutlined />,
    //     content: '确定要删除吗',
    //     okText: '确认',
    //     okType: 'danger',
    //     cancelText: '取消',
    //     onOk() {
    //         console.log('OK');
    //     },
    //     onCancel() {
    //         console.log('Cancel');
    //     },
    //     });
    // }
  


    // 操作按钮
    // 冻结
    const handleMenuClickFrozen = (e) => {
        console.log('click', e);
        console.log(onSelectusername())
        axios({
            method:'POST',
            url:'/system/per/user/updateDjUser',
            data:{
                username: onSelectusername(),
            }
        })
        .then((res) => {
            console.log("返回值:",res)
            setdatas(res.data.data)
            message.success('冻结成功')
            console.log(data)
        })
        .catch((err) => {
            console.log(err)
        })
        Updata()
    }
    //删除
    const handleMenuClickDel = (e) => {
        confirm({
        title: '警示',
        icon: <ExclamationCircleOutlined />,
        content: '确定要删除吗',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
            console.log('click', e);
            axios({
                method:'POST',
                url:'/system/per/user/delUser',
                data:{
                    username: onSelectusername(),
                }
            })
            .then((res) => {
                console.log("返回值:",res)
                setdatas(res.data.data)
                console.log(data)
                message.success('删除成功')
            })
            .catch((err) => {
                console.log(err)
            })
            Updata()
            console.log('OK');
        },
        onCancel() {
            console.log('Cancel');
        },
        });
    }

    // 删除2
    const clickDetadell = (text) =>{
        let edit = data.filter(Item => Item.id === text)
        setEditdata(() => edit[0])
        console.log(edit[0].username)
        console.log(edit[0])
        console.log(text)
        confirm({
            title: '警示',
            icon: <ExclamationCircleOutlined />,
            content: '确定要删除吗',
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                axios({
                    method:'POST',
                    url:'/system/per/user/delUser',
                    data:{
                        username: Editdata.name,
                    }
                })
                .then((res) => {
                    console.log("返回值:",res)
                    setdatas(res.data.data)
                    console.log(data)
                    message.success('删除成功')
                })
                .catch((err) => {
                    console.log(err)
                })
                Updata()
                console.log('OK');
            },
            onCancel() {
                console.log('Cancel');
            },
            });
    }
    const menu = (
        <Menu >
          <Menu.Item key="1"  >启用</Menu.Item>
          <Menu.Item key="2" onClick={handleMenuClickFrozen}>冻结</Menu.Item>
          <Menu.Item key="3" onClick={handleMenuClickDel}>删除</Menu.Item>
        </Menu>
    );


    // 表格表头
    const columns = [
        {
          title: '用户名',
          key: 'username',
          dataIndex: 'username',
          align: 'center',
        //   排序
          sorter: (a, b) => a.username.length - b.username.length,
          multiple: 1,
        },
        {
          title: '用户昵称',
          key: 'nickname',
          dataIndex: 'nickname',
          sorter: (a, b) => a.nickname.length - b.nickname.length,
          align: 'center'
        },
        {
          title: '所在部门',
          key: 'dept_id',
          dataIndex: 'dept_id',
          align: 'center',
          render(text) {
            return (
                text === 1 ? '总公司': text === 2 ? '技术部门' : text === 3 ? '市场部门' : text === 4 ? '研发部门' : '测试部门' 
            );
        }
        },
        {
          title: '性别',
          key: 'sex',
          dataIndex: 'sex',
          align: 'center',
          render(text) {
            return (
                text === 1 ? '男': '女'
            );
        }
        },
        {
          title: '电话',
          key: 'phone',
          dataIndex: 'phone',
          align: 'center'
        },
        {
          title: '邮箱',
          key: 'email',
          dataIndex: 'email',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'create_date',
          dataIndex: 'create_date',
          align: 'center'
        },
        {
          title: '状态',
          key: 'status',
          dataIndex: 'status',
          align: 'center',
          render(text) {
            return (
                text === 1 ? '正常': '冻结'
            );
        }
        },
        {
          title: '操作',
          key: 'id',
          dataIndex: 'id',
          align: 'center',
          render: (text) => (
            <Space size="middle">
                <Button size='small' onClick={() => clickEdit(text)}>编辑</Button>
                <Button size='small' onClick={() => clickDetailed(text)}>详细</Button>
                <Button size='small' onClick={() => clickDetadell(text)} type="dashed" danger>删除</Button>
            </Space>
        ),
        },
    ];


    //复选框事件
    const [ datachange, setdata] = useState([ ]);
   
    const  onSelectChange = (datachange) => {
        console.log('单选框数组:', datachange);
        setdata( datachange );
    };

    const rowSelection = {
      onChange: onSelectChange,
      datachange,

    };
    // 获取复选框勾选的username
    const  onSelectusername = () => {
        for(let i = 0; i <= datachange.length; i++){
            let  mima = data.filter(Item => datachange[i] === Item.id)
                console.log("返回值密码:",mima)
                return mima[0].username
        }   
    }

    // 修改密码
    const onFinish3 = (values) => {
        console.log('添加用户校验:', values);
    };
    const [isModalVisible, setIsModalVisible] = useState(false);

    const clickPassword = () =>{
        if(datachange.length <= 0){
            message.info('请选择一条记录');
        }else{
            setIsModalVisible(true);
            onSelectusername()
            console.log(onSelectusername())
        }
    }

    const handleOk = async () => {
        try {

          const valuefrommima = await form4.validateFields();
          console.log('表单值:', valuefrommima);
          axios({
              method:'POST',
              url:'/system/per/user/updatePwd',
              data:{
                  newpassword: valuefrommima.xinmima,
                  password: valuefrommima.mima,
                  username: clickPassword(),
              }
          })
          .then((res) => {
              console.log("返回值:",res)
              setdatas(res.data.data)
              message.success('修改成功')
              console.log(data)
          })
          .catch((err) => {
              console.log(err)
          })
          
          Updata()
          setIsModalVisible(false);
        } catch (errorInfo) {
          console.log('Failed:', errorInfo);
        }
      };
    
    const handleCancel = () => {
        setIsModalVisible(false);
    };


    // 角色分配
    const clickrole = () =>{
        if(datachange.length <= 0){
            message.info('请选择一条记录');
        }else{
            setIsModalVisible2(true);
        }
    }

    const [isModalVisible2, setIsModalVisible2] = useState(false);

    const handleOk2 = () => {
        setIsModalVisible2(false);       
    };
    
    const handleCancel2 = () => {
        setIsModalVisible2(false);
    };

    // 角色分配复选框值
    const onChangerole1 = (e) => {
        console.log(e.target.checked)
    }
    const onChangerole2 = (e) => {
        console.log(e.target.checked)
    }
    const onChangerole3 = (e) => {
        console.log(e.target.checked)
    }



    // 添加用户弹窗
    const onFinish2 = (values) => {
        console.log('添加用户校验:', values);
    };
    const clickadd = () =>{
        setIsModalVisible3(true);
    }
    const [isModalVisible3, setIsModalVisible3] = useState(false);
    const handleOk3 = async () => {
        try {
          const valuefroms = await form2.validateFields();
          console.log('表单值:', valuefroms);
          axios({
              method:'POST',
              url:'/system/per/user/insertUser',
              data:{
                  dept_id: valuefroms.department,
                  nickname: valuefroms.nickname,
                  password: valuefroms.password,
                  username: valuefroms.username,
                  email: valuefroms.email,
                  phone: valuefroms.phone,
                  remark: valuefroms.intro,
                  sex: valuefroms.sex,
                  sysUser: '',
              }
          })
          .then((res) => {
              console.log("返回值:",res)
            //   setdatas(res.data.data)
              const data = res.data.data
              console.log(data.length)
              for (let i = 0 ; i < data.length; i++) {
                  data[i].key = data[i].id
              }
              setdatas([...data])
              console.log(data)
              message.success('添加成功')
          })
          .catch((err) => {
              console.log(err)
          })
          Updata()
          setIsModalVisible3(false);
        } catch (errorInfo) {
          console.log('Failed:', errorInfo);
        }
      };
      
    const handleCancel3 = () => {
        setIsModalVisible3(false);
    };

    // 添加数据表单样式
    const formItemLayout = {
        labelCol: {
            xs: {
            span: 24,
            },
            sm: {
            span: 8,
            },
        },
        wrapperCol: {
            xs: {
            span: 24,
            },
            sm: {
            span: 16,
            },
        },
    };

    const onFinish = (values) => {
        console.log('表单值校验2:', values);
    };

    // 编辑弹窗
    const [isModalVisible4, setIsModalVisible4] = useState(false);
    
    const [Editdata, setEditdata ] = useState({})
    const clickEdit = (text,ture) =>{
        console.log("点击了",text)
        setEditdata ({ })
        let edit = data.filter(Item => Item.id === text)
        setEditdata(() => edit[0])
        console.log(edit)
        console.log(edit[0])
        setIsModalVisible4(true);
    }

    const handleOk4 = async () => {
        // try {
        //     const valueEdits = await form3.validateFields();
        //     console.log('表单值:',valueEdits);
        //     axios({
        //         method:'POST',
        //         url:'/system/per/user/updateUser',
        //         data:{
        //             id: Editdata.id,
        //             username: Editdata.username,
        //             nickname: Editdata.nickname,
        //             dept_id: Editdata.dept_id,
        //             email: Editdata.email,
        //             phone: Editdata.phone,
        //             sex: Editdata.sex,
        //             remark: Editdata.intro
        //         }
        //     })
        //     .then((res) => {
        //         console.log("返回值:",res)
        //         // setdatas(res.data.data)
        //         // const data = res.data.data
        //         // console.log(data.length)
        //         // for (let i = 0 ; i < data.length; i++) {
        //         //     data[i].key = data[i].id
        //         // }
        //         // setdatas([...data])
        //         // console.log(data)
        //         message.success('修改成功')
        //         Updata()

        //     })
        //     .catch((err) => {
        //         console.log(err)
        //     })
            setIsModalVisible4(false);
        // } catch (errorInfo) {
        //     console.log('Failed:', errorInfo);
        // }
    };
    
    const handleCancel4 = () => {
        setEditdata ([])
        setIsModalVisible4(false);
    };

    // 详情弹窗
    const clickDetailed = (text) =>{
        let edit = data.filter(Item => Item.id === text)
        setEditdata(() => edit[0])
        console.log(edit)
        console.log(edit[0])
        setIsModalVisible5(true);
    }

    const [isModalVisible5, setIsModalVisible5] = useState(false);

    const handleOk5 = async () => {
        // try {
        //     const values = await form.validateFields();
        //     console.log('表单值:', values);

        //     setIsModalVisible5(false);
        // } catch (errorInfo) {
        //     console.log('Failed:', errorInfo);
        // }
    };
    
    const handleCancel5 = () => {
        setIsModalVisible5(false);
    };


    

    return (
        <div className='product'>   
            {/* 头部搜索部分 */}
            <Form name="registerss" 
                    onFinish={onFinishsearch}
                    form={form1}
                    initialValues ={{
                        typecode: 1,
                    }}>
                <div className='search-top'>
                        <Space>
                            <div className='search-top1'>
                                <Input addonBefore="状态" style={{ width: '25%' }} />
                                <Form.Item name="typecode">
                                    <Select>
                                            <Option value= {1}>正常</Option>
                                            <Option value= {2}>冻结</Option>
                                    </Select>
                                </Form.Item>
                            </div>
                            <div className='search-top2'>
                                <Input addonBefore="所在部门" style={{ width: '27%' }} />
                                    <Form.Item name="company">
                                        <TreeSelect   className='search-top22' getPopupContainer={triggerNode => triggerNode.parentNode}
                                                showSearch
                                                style={{ width: 200, }}
                                                dropdownStyle={{overflow: 'auto'}}
                                                placeholder="请选择部门"
                                                allowClear
                                                treeDefaultExpandAll
                                                name= 'company'
                                                >
                                            <TreeNode value={0} title="全部" >
                                                    <TreeNode value={1} title="总公司">
                                                        <TreeNode value={2} title="技术部门" />
                                                        <TreeNode value={3} title="市场部门" />
                                                        <TreeNode value={4} title="研发部门" />
                                                        <TreeNode value={5} title="测试部门" />
                                                    </TreeNode>
                                            </TreeNode>
                                        </TreeSelect>
                                    </Form.Item>
                            </div>
                            <div className='search-top3'>
                                <Form.Item name="username">
                                    <Input addonBefore="用户名" placeholder='请输入用户名' style={{ width: 250}}/>   
                                </Form.Item>
                            </div> 
                            <div className='search-top4'>
                                <Form.Item name="nickname">
                                    <Input addonBefore="用户昵称"  placeholder='请输入用户昵称'  style={{ width: 250 }}/> 
                                </Form.Item>
                            </div> 
                            <div className='search-top5'>
                                <Button type="primary" onClick={onSearchclick}  icon={<SearchOutlined />}>搜索</Button>
                            </div>
                        </Space>
                     </div>
            </Form>
            {/* 操作部分     */}
                <div className='operation'>
                    <div>
                        <Space>
                            <Button type="primary" icon = {<SyncOutlined />} onClick={clickPassword}>修改密码</Button>
                            <Button type="primary" icon = {<IdcardFilled />} onClick={clickrole}>角色分配</Button>
                        </Space>
                    </div>

                    <div>
                        <Space>
                            <Button type="primary" icon = {<PlusOutlined />} onClick={clickadd}>添加</Button>
                            <Dropdown.Button type="primary"  overlay={menu}>操作</Dropdown.Button>
                        </Space>
                    </div>
                </div>
                {/* 表格部分 */}
                <div>
                    <Table rowSelection={rowSelection}  bordered columns={columns}  dataSource={data}   
                     />
                </div>
                {/* 修改密码弹窗 */}
                <div>
                    <Modal title="修改密码" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}  okText="确认" cancelText="取消">
                        <Form
                            {...formItemLayout}
                            form={form4}
                            onFinish={onFinish3}
                            scrollToFirstError
                        >
                            <Form.Item label="密码" name="mima" rules={[{ 
                                required: true,
                                message: '密码不能为空!!!'  }]}
                            >
                                <Input.Password/>
                            </Form.Item>
                            <Form.Item label="新密码" name="xinmima" rules={[{ 
                                required: true,
                                message: '新密码不能为空!!!' }]}
                            >
                                <Input.Password/>
                            </Form.Item>
                        </Form>
                    </Modal>
                </div>
                {/* 角色分配 */}
                <div>
                    <Modal title="角色分配" visible={isModalVisible2} onOk={handleOk2} onCancel={handleCancel2}  okText="确认" cancelText="取消">
                        <Checkbox onChange={onChangerole1}>管理员</Checkbox>
                        <Checkbox onChange={onChangerole2}>用户组1</Checkbox>
                        <Checkbox onChange={onChangerole3}>用户组2</Checkbox>
                    </Modal>
                </div>
                {/* 添加弹窗 */}
                <div>
                    <Modal title="添加用户" visible={isModalVisible3} onOk={handleOk3} onCancel={handleCancel3}  okText="确认" cancelText="取消">
                        <Form
                            {...formItemLayout}
                            form={form2}
                            name="register"
                            onFinish={onFinish2}
                            scrollToFirstError
                            initialValues ={{
                                sex: 1
                            }}
                            >
                                <Form.Item
                                    name="username"
                                    label="用户名"
                                    placeholder = '请输入用户名'
                                    rules={[
                                        {
                                            required: true,
                                            message: '用户名不能为空',
                                            whitespace: true,
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item
                                    name="nickname"
                                    label="用户昵称"
                                    placeholder = ' 请输入用户昵称'
                                    tooltip="请输入想要的昵称!"
                                    rules={[
                                        {
                                            required: true,
                                            pattern: /^[\u2E80-\u9FFF]+$/,
                                            message: '昵称需为中文字符',
                                            whitespace: true,
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item
                                    name="password"
                                    label="用户密码"
                                    placeholder = '请输入用户密码 '
                                    rules={[
                                    {
                                        required: true,
                                        message: '密码不能为空',
                                        whitespace: true,
                                    },
                                    ]}
                                    hasFeedback
                                >
                                    <Input.Password />
                                </Form.Item>

                                <Form.Item
                                    name="confirm"
                                    label="确认密码"
                                    placeholder = '再次输入密码'
                                    dependencies={['password']}
                                    hasFeedback
                                    rules={[
                                    {
                                        required: true,
                                        message: '密码不能为空',
                                        whitespace: true,
                                    },
                                    ({ getFieldValue }) => ({
                                        validator(_, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve();
                                        }
                                            return Promise.reject(new Error('密码不一致请重新输入'));
                                        },
                                    }),
                                    ]}
                                >
                                    <Input.Password />
                                </Form.Item>

                                <Form.Item
                                    name="department"
                                    label="所在部门"
                                    placeholder = '请选择部门'
                                    rules={[
                                    {
                                        required: true,
                                        message: '部门不能为空',
                                    },
                                    ]}
                                >
                                    <TreeSelect getPopupContainer={triggerNode => triggerNode.parentNode}
                                        treeData={[
                                            { title: '总公司', value: 1, children: [
                                                { title: '技术部门', value: 2 },
                                                { title: '市场部门', value: 3 },
                                                { title: '研发部门', value: 4 },
                                                { title: '测试部门', value: 5 },
                                            ] },
                                        ]}/>
        
                                </Form.Item>

                                <Form.Item
                                    name="email"
                                    label="邮箱"
                                    placeholder = '请输入邮箱'
                                    rules={[
                                        {
                                            pattern: /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/,
                                            message: '邮箱地址错误,请重新输入',
                                            whitespace: true,
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item
                                    name="phone"
                                    label="电话号码"
                                    placeholder = '电话号码'
                                    rules={[
                                        {
                                            pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
                                            message: '请输入正确的手机号',
                                            whitespace: true,
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item name="sex" label="请选择性别">
                                    <Radio.Group>
                                        <Radio value= {1}>男</Radio>
                                        <Radio value= {2}>女</Radio>
                                    </Radio.Group>
                                </Form.Item>

                                <Form.Item
                                    name="intro"
                                    label="备注"
                                    placeholder ='请输入内容'
                                >
                                    <Input.TextArea showCount maxLength={100} />
                                </Form.Item>
                        </Form>
                    </Modal>
                </div>
                {/* 修改弹窗modal */}
                <div>
                    {/* <Edit/> */}
                    <Modal title="编辑用户" visible={isModalVisible4} onOk={handleOk4} onCancel={handleCancel4}  okText="确认" cancelText="取消">
                         <Form
                            {...formItemLayout}
                            form={form3}
                            name="register"
                            onFinish={onFinish}
                            scrollToFirstError
                            // 默认值
                            // initialValues={{
                            //     username: Editdata.username,
                            //     nickname: Editdata.nickname,
                            //     department: Editdata.dept_id,
                            //     email: Editdata.email,
                            //     phone: Editdata.phone,
                            //     sex: Editdata.sex,
                            // }}
                            >
                                <Form.Item
                                    name="username"
                                    label="用户名"
                                    placeholder = '请输入用户名'
                                    // initialValue  ={{
                                    //     username: Editdata.username,
                                    // }}
                                    rules={[
                                    {
                                        required: true,
                                        message: '用户名不能为空',
                                        whitespace: true,
                                    },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item
                                    name="nickname"
                                    label="用户昵称"
                                    placeholder = ' 请输入用户昵称' 
                                    tooltip="请输入想要的昵称!"
                                    rules={[
                                    {
                                        required: true,
                                        message: '昵称不能为空',
                                        whitespace: true,
                                    },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item
                                    name="department"
                                    label="所在部门"
                                    placeholder = '请选择部门'
                                    rules={[
                                    {
                                        required: true,
                                        message: '部门不能为空',
                                    },
                                    ]}
                                >
                                    <TreeSelect getPopupContainer={triggerNode => triggerNode.parentNode}
                                        treeData={[
                                            { title: '总公司', value: 1 , children: [
                                                { title: '技术部门', value: 2},
                                                { title: '市场部门', value: 3},
                                                { title: '测试部门', value: 4},
                                                { title: '研发部门', value: 5},
                                            ] },
                                        ]}/>
        
                                </Form.Item>

                                <Form.Item
                                    name="email"
                                    label="邮箱"
                                    placeholder = '请输入邮箱'
                                    rules={[
                                        {
                                            pattern: /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/,
                                            message: '邮箱地址错误,请重新输入',
                                            whitespace: true,
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item
                                    name="phone"
                                    label="电话号码"
                                    placeholder = '电话号码'
                                    rules={[
                                        {
                                            pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
                                            message: '请输入正确的手机号',
                                            whitespace: true,
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item name="sex"  label="请选择性别">
                                    <Radio.Group>
                                        <Radio value={1}>男</Radio>
                                        <Radio value={2}>女</Radio>
                                    </Radio.Group>
                                </Form.Item>

                                <Form.Item
                                    name="intro"
                                    label="备注"
                                    placeholder ='请输入内容'
                                >
                                    <Input.TextArea showCount maxLength={100} />
                                </Form.Item>
                        </Form>
                    </Modal>
                </div> 
                
                {/* 详情弹窗 */}
                <div>
                    <Modal width={800} title="详细信息" visible={isModalVisible5} onOk={handleOk5} onCancel={handleCancel5}  okText="确认" cancelText="取消">
                        <div className='detailed'>
                            <div className='detailed-top'>
                                <div className='detailed-top1'>
                                基本信息
                                </div>

                                <div className='detailed-top1'>
                                    <div className='detailed-top-small0' >用户编号</div>
                                    <div className='detailed-top-small2'>{Editdata.id}</div>
                                    <div className='detailed-top-small'>用户账号</div>
                                    <div className='detailed-top-small2'>{Editdata.username}</div>
                                </div>

                                <div className='detailed-top1'>
                                    <div className='detailed-top-small0' >用户昵称</div>
                                    <div className='detailed-top-small2'>{Editdata.nickname}</div>
                                    <div className='detailed-top-small'>用户性别</div>
                                    <div className='detailed-top-small2'>{Editdata.sex  === 1 ? '男': '女'}</div>
                                </div>

                                <div className='detailed-top1'>
                                    <div className='detailed-top-small1'>所在部门</div>
                                    <div className='detailed-top-small3'>{Editdata.dept_id === 1 ? '总公司': Editdata.dept_id === 2 ? '技术部门' : Editdata.dept_id === 3 ? '市场部门' : Editdata.dept_id === 4 ? '研发部门' : '测试部门'}</div>
                                </div>

                                <div className='detailed-top1'>
                                        <div  className='detailed-top-small0' >电话号码</div>
                                        <div className='detailed-top-small2'>{Editdata.phone}</div>
                                        <div className='detailed-top-small'>邮箱</div>
                                        <div className='detailed-top-small2'>{Editdata.email}</div>
                                </div>

                                <div className='detailed-top1'>
                                        <div  className='detailed-top-small0' >创建时间</div>
                                        <div className='detailed-top-small2'>{Editdata.create_data}</div>
                                        <div className='detailed-top-small'>最后修改</div>
                                        <div className='detailed-top-small2'>{Editdata.updata_data}</div>
                                </div>

                                <div className='detailed-top1'>
                                    <div className='detailed-top-small1'>
                                        备注
                                    </div>
                                    <div className='detailed-top-small3'>
                                        {Editdata.remark}
                                    </div>
                                </div>
                            </div>

                            {/* <div className='detailed-botton'>
                                <div className='detailed-botton-small'>操作时间</div>
                                <div className='detailed-botton-small'>操作人</div>
                                <div className='detailed-botton-small'>日志名称</div>
                                <div className='detailed-botton-small2'>日志消息</div>
                            </div> */}
                        </div>
                    </Modal>
                </div>
        </div>
    )
}

